$(function() {
    $(".rules span").click(function() {
        $(".rule").stop().fadeIn(100);
    });
    $(".rule a").click(function() {
        $(".rule").stop().fadeOut(100);

    });
    $(".start").click(function() {
        //点击开始游戏按钮，就让他本身消失
        $(this).stop().fadeOut(100);
        //调用图片出现函数
        wolfAnimation();
        //调用一下进度条函数
        progressHandler();
    })

    function progressHandler() {
        //重新设置进度条的宽度
        $(".time").css({
            width: 180
        });
        //设置一个定时器函数，不断缩小进度条的宽度
        var timer = setInterval(function() {
            //首先拿到倒计时的宽度
            var timerWidth = $(".time").width();
            //让宽度自减1
            timerWidth -= 1;
            //在把宽度赋值给css里面的time的width
            //这样进度条就在不断的减小了
            $(".time").css({
                width: timerWidth
            });
            //如果进度条走完，就关闭定时器，让重新开始的页面淡入
            if (timerWidth <= 0) {
                clearInterval(timer);
                $(".mask").stop().fadeIn(100);
                //同时调用动画关闭函数
                stopWolfAnimation();
            }
        }, 100)
    }
    //监听重新开始按钮的点击
    $(".mask button").click(function() {
        $(".mask").stop().fadeOut(100);
        //在让时间条重新倒计时
        progressHandler()
            //调用图片出现函数
        wolfAnimation();
        $(".score").text(0);
    })
    var wolfTimer;

    function wolfAnimation() {
        //定义两个数组储存灰太狼和小灰灰的图片
        var wolf_big = ['./images/h0.png', './images/h1.png',
            './images/h2.png',
            './images/h3.png',
            './images/h4.png',
            './images/h5.png',
            './images/h6.png',
            './images/h7.png',
            './images/h8.png',
            './images/h9.png'
        ];
        var wolf_small = ['./images/x0.png', './images/x1.png',
            './images/x2.png',
            './images/x3.png',
            './images/x4.png',
            './images/x5.png',
            './images/x6.png',
            './images/x7.png',
            './images/x8.png',
            './images/x9.png'
        ];
        //定义一个数组。保存所有可能出现的位置
        var arrPos = [{ left: "100px", top: "115px" },
            { left: "20px", top: "160px" },
            { left: "190px", top: "142px" },
            { left: "105px", top: "193px" },
            { left: "19px", top: "221px" },
            { left: "202px", top: "212px" },
            { left: "120px", top: "275px" },
            { left: "30px", top: "295px" },
            { left: "209px", top: "297px" }
        ];
        //创建一个图片
        var $wolfImage = $("<img src='' class='wolfImage'>");
        //设置图片出现的位置
        //设置一个随机值，随机获取数组中图片的位置
        //获取0-8之间的随机数
        var posIndex = Math.round(Math.random() * 8);
        $wolfImage.css({
            position: "absolute",
            top: arrPos[posIndex].top,
            left: arrPos[posIndex].left
        });
        var wolfType = Math.round(Math.random()) == 0 ? wolf_big : wolf_small;
        //设定一个定时器，每隔一段时间修改src里的图片位置
        window.wolfIndex_S = 0;
        window.wolfIndex_E = 5;

        wolfTimer = setInterval(function() {
                if (wolfIndex_S >= wolfIndex_E) {
                    $(".wolfImage").remove();
                    clearInterval(wolfTimer);
                    wolfAnimation();
                }

                $wolfImage.attr("src", wolfType[wolfIndex_S]);


                wolfIndex_S++;
            }, 200)
            //将图片添加到界面
        $('.container').append($wolfImage);
        //给游戏逻辑函数传参并调用
        gameRules($wolfImage);
    }
    //游戏逻辑函数
    function gameRules($wolfImage) {
        $wolfImage.one("click", function() {
            //直接从全局变量修改wolfIndex_S，wolfIndex_E的值，让定时器实现拍打效果
            wolfIndex_S = 5;
            wolfIndex_E = 9;
            //修改图片的索引
            //拿到当前的图片 地址
            var $src = $(this).attr("src");
            //检查当前游戏地址有没有h
            var flag = $src.indexOf("h") >= 0; //有的话返回true
            console.log(flag);
            if (flag) //当前点击的图片为灰太狼
            {
                $(".score").text(parseInt($(".score").text()) + 10);
            } else {
                $(".score").text(parseInt($(".score").text()) - 10);
            }

        });
    }
    //停止动画函数
    function stopWolfAnimation() {
        $(".wolfImage").remove();
        clearInterval(wolfTimer);
    }

})